<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>榜单识别系统</title>
    <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>

<div class="layui-container">
    <div class="layui-upload layui-margin-1">
        <button class="layui-btn layui-btn-normal" id="ID-upload-demo-files" type="button">选择文件</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <colgroup>
                    <col style="min-width: 100px;">
                    <col width="150">
                    <col width="260">
                    <col width="150">
                </colgroup>
                <thead>
                <th>文件名</th>
                <th>大小</th>
                <th>上传进度</th>
                <th>操作</th>
                </thead>
                <tbody id="ID-upload-demo-files-list"></tbody>
            </table>
        </div>
    </div>

    <div class="layui-margin-1">
        <button active="recognition" class="layui-btn" type="button">榜单识别</button>
        <button active="downData" class="layui-btn layui-bg-blue" type="button">导出数据</button>
        <table class="layui-hide" id="LAY-bangDan-table" lay-filter="LAY-bangDan-table"></table>
    </div>
</div>

<style>
    .layui-margin-top-10 {
        margin-top: 10px;
    }
</style>
<!-- body 末尾处引入 layui -->
<script src="layui/layui.js"></script>
<script src="layui/excel.js"></script>
<script>
    layui.use(function () {
        let util = layui.util;
        let table = layui.table;
        let upload = layui.upload;
        let element = layui.element;
        let $ = layui.$;
        // 制作多文件上传表格
        let uploadListIns = upload.render({
            elem: '#ID-upload-demo-files',
            elemList: $('#ID-upload-demo-files-list'),
            url: '',
            accept: 'images',
            multiple: true,
            auto: false,
            choose: function (obj) {
                let that = this;
                let files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
                // 读取本地文件
                obj.preview(function (index, file, result) {
                    let tr = $(['<tr id="upload-' + index + '">',
                        '<td>' + file.name + '</td>',
                        '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',
                        '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
                        '<td>',
                        '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                        '</td>',
                        '</tr>'].join(''));

                    // 删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; // 删除对应的文件
                        tr.remove(); // 删除表格行
                        // 清空 input file 值，以免删除后出现同名文件不可选
                        uploadListIns.config.elem.next()[0].value = '';
                    });

                    that.elemList.append(tr);
                    element.render('progress'); // 渲染新加的进度条组件
                });
            },
            done: function (res, index, upload) { // 成功的回调
                let that = this;
                // if(res.code == 0){ // 上传成功
                let tr = that.elemList.find('tr#upload-' + index)
                let tds = tr.children();
                tds.eq(3).html(''); // 清空操作
                delete this.files[index]; // 删除文件队列已经上传成功的文件
                return;
                //}
                this.error(index, upload);
            },
            allDone: function (obj) { // 多文件上传完毕后的状态回调
                console.log(obj)
            },
            error: function (index, upload) { // 错误回调
                let that = this;
                let tr = that.elemList.find('tr#upload-' + index);
                let tds = tr.children();
                // 显示重传
                tds.eq(3).find('.demo-reload').removeClass('layui-hide');
            },
            progress: function (n, elem, e, index) { // 注意：index 参数为 layui 2.6.6 新增
                element.progress('progress-demo-' + index, n + '%'); // 执行进度条。n 即为返回的进度百分比
            }
        });

        renderTable([]);

        // 触发事件
        util.on('active', {
            'recognition': function () {
                let fileMap = uploadListIns.config.files;
                for (let fileElement in fileMap) {
                    let file = fileMap[fileElement];
                    let fr = new FileReader();
                    fr.onload = function () {
                        let base64List = fr.result.split('base64,');
                        if (base64List.length > 1) {
                            recognition(base64List[1]);
                        }
                    }
                    fr.readAsDataURL(fileMap[fileElement]);
                }
            },
            'downData': function () {
                LAY_EXCEL.exportExcel([[1, 2, 3]], '榜单数据 ' + new Date().getTime() + '.xlsx', 'xlsx');
            }
        });

        function recognition(base64) {
            var postdata={base64Str:base64};
            $.ajax({
                url: 'http://ocr.feixinning.site/api/baiduocr/readBd',
                type: 'POST',
                contentType: "application/json",
                dataType: "json",
                data:JSON.stringify(postdata),
                success: function (data) {
                debugger;
                    renderTable(data)
                }
            });
        }

        function renderTable(data) {
            table.render({
                elem: '#LAY-bangDan-table',
                defaultToolbar: ['exports'],
                className: 'layui-margin-top-10',
                cols: [
                    [{
                        field: 'id',
                        type: 'checkbox',
                        fixed: 'left',
                        style: 'border-right: 1px white solid'
                    }, {
                        field: 'PlateNum',
                        title: '车牌号'
                    }, {
                        field: 'PrintTime',
                        title: '打印时间'
                    }, {
                        field: 'CrossWeight',
                        title: '毛重'
                    }, {
                        field: 'TareWeight',
                        title: '皮重',
                    }, {
                        field: 'NetWeight',
                        title: '净重'
                    }, {
                        field: 'SendingCompany',
                        title: '发货单位'
                    }, {
                        field: 'ReceivingCompany',
                        title: '收货单位'
                    }, {
                        field: 'DeliveryNumber',
                        title: '单号'
                    }]
                ],
                text: {
                    none: '暂无数据'
                },
                data: data
            })
        }

    });
</script>
</body>
</html>
